Description

Adds optional haptic feedback to four 1st-gen components (Combobox, Slider, Picker Button, Number Field) for better accessibility on supported mobile devices.

• New property: hapticFeedback (boolean, default false), attribute haptic-feedback.
• Behavior when enabled:
  • Uses Vibration API (navigator.vibrate(16)) when available.
  • On iOS 18+, falls back to a visually hidden native switch control triggered via programmatic label.click() to leverage system haptics when Vibration API is not supported.
• Trigger points:
  • Combobox: list open; option selected.
  • Slider: pointer up; value commit (single and multi-handle).
  • Picker Button: click/release.
  • Number Field: value commit (stepper buttons, input change, keyboard step).
• Number Field (mobile): The haptic switch is fully hidden on mobile: opacity: 0, appearance: none, and pointer-events: none are applied only to the native switch input (#haptic-trigger), so the label remains programmatically clickable for haptics without showing the control.
• Storybook: New “Web Haptics” stories for each component with instructions and demos (with/without haptic feedback).

Motivation and context

Haptic feedback improves usability and accessibility on touch devices by confirming interactions (e.g., list open, selection, value change) without relying solely on visual or auditory feedback. This change keeps haptics opt-in so existing apps are unchanged and authors can enable it where it adds value.

Related issue(s)

• fixes [Issue Number] (or N/A if no issue yet)

Screenshots (if appropriate)

N/A — behavior is haptic and/or visible only when haptic-feedback is set and tested on a supporting device/emulator.

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published. (Note: 1st-gen is in changeset ignore; add a changeset only if your release process publishes these packages.)
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Combobox — haptic feedback

  1. Open Storybook → Combobox → “Web Haptics” (or story with haptic-feedback).
  2. On a device/emulator that supports vibration or iOS 18+ haptics, open the combobox and select an option.
  3. Expect a short haptic pulse when the list opens and when an option is selected (no visible UI change beyond existing behavior).

• Slider — haptic feedback

  1. Open Storybook → Slider → “Web Haptics” (or story with haptic-feedback).
  2. Drag a handle and release; on multi-handle, move a handle and commit.
  3. Expect haptic feedback on pointer up / value commit.

• Picker Button — haptic feedback

  1. Open Storybook → Picker Button → “Web Haptics” (or story with haptic-feedback).
  2. Click the picker button.
  3. Expect haptic feedback on click/release.

• Number Field — haptic feedback and hidden switch

  1. Open Storybook → Number Field → “Web Haptics” (or story with haptic-feedback).
  2. Change value via stepper, typing, or arrow keys; commit value.
  3. Expect haptic feedback on value commit. On mobile viewport, confirm the native switch is not visible (no extra control shown).

• Number Field — default (no haptics)

  1. Use Number Field without haptic-feedback (default).
  2. Confirm behavior and layout are unchanged; no hidden switch or haptics.

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Accessibility testing checklist

Required: Complete each applicable item and document your testing steps (replace the placeholders with your component-specific instructions).

• Keyboard (required — document steps below) — What to test for: Focus order is logical; Tab reaches the component and all interactive descendants; Enter/Space activate where appropriate; arrow keys work for tabs, menus, sliders, etc.; no focus traps; Escape dismisses when applicable; focus indicator is visible.

  1. Go to each component’s Storybook story (Combobox, Slider, Picker Button, Number Field).
  2. Tab to the component, use keyboard to open/change value/select; ensure no new focusable elements are exposed (hidden switch is not in tab order).
  3. Expect same keyboard behavior as before; haptics (when enabled) fire on the same commit/selection events.

• Screen reader (required — document steps below) — What to test for: Role and name are announced correctly; state changes (e.g. expanded, selected) are announced; labels and relationships are clear; no unnecessary or duplicate announcements.

  1. Go to each component’s Storybook story with haptic-feedback enabled.
  2. Use screen reader to operate the component (open list, select, change value).
  3. Expect no new or duplicate announcements from the haptic implementation; the hidden switch (when used) should not be announced or focused.